<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>login</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
    <style>
        body{
            background-image: url("/static/images/beijing.jpg");
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            list-style: none;
        }
        .registerForm{
            width: 350px;
            height: 680px;
            background-color: white;
            padding: 30px 20px;
            margin-top: 50%;
            border-radius: 5px;
            box-shadow: 0 0 5px black;
            box-sizing: border-box;
        }
	.btn_login{
		width:100%
	}
	.txt_input{
	    border:1px solid #BEBEBE
	}
	.icon{
	    padding-top:10px;
	    padding-left:10px
	}
	.t_input{
	    border:none
	}
	.title{
		height:50px
	}


    .wrap {
        width: 310px;
        height: 250px;
        margin: 0px;
    }

    .wrap-container {
        width: 310px;
        height: 200px;
        background-color: #ccc;
        /* 相对定位 */
        position: relative;
    }

    .wrap-container .bg {
        width: 310px;
        height: 200px;
        /*background-image: url("/static/images/1.jpg");*/
        background-size: cover;
    }

    .wrap-container .box {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50px;
        box-shadow: 0px 0px 2px #fff;
    }

    .wrap-container .red {
        background-color: rgba(100,100,100,0.5);
        left: 0;
        /* 层级 */
        z-index: 1000;
        background-repeat: no-repeat;
    }

    .wrap-container .green {
        background-color: rgba(255, 255, 255, .5);
        left: 200px;
    }

    .wrap-side {
        width: 310px;
        height: 48px;
        background-color: #fff;
        margin-top: 10px;
        position: relative;
        left: 0;
        border: 1px solid #ccc;
    }

    .wrap-side p {
        color: #666;
        text-align: center;
        line-height: 50px;
        /* 禁止选择文本 */
        user-select: none;
    }

    .wrap-side ul {
        position: absolute;
        top: 0;
        left: -2px;
        width: 310px;
        height: 50px;
    }

    .wrap-side ul li {
        width: 50px;
        height: 50px;
        background-color: #1890FF;
        cursor: move;
        position: absolute;
        left: 0px;
        top: 0;
        text-align: center;
        line-height: 50px;
    }

    .wrap-side ul li::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-right: 2px solid #fff;
        border-top: 2px solid #fff;
        /* 旋转属性 */
        transform: rotate(45deg);
        /* 垂直对齐 */
        vertical-align: middle;
    }

    .wrap-side div {
        width: 0px;
        height: 50px;
        background-color: rgba(0, 191, 255, .5);
        position: absolute;
        left: 0px;
        top: 0;
    }
    </style>

</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="registerForm">
                   <div  class="title"> <h2 align="center">博客注册</h2></div>
                    <form class="layui-form"  action="">
                        <div class="layui-form-item">
                            <div class="layui-row txt_input"  >
                                <div class="layui-col-md1 icon" > <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="userId"></label></div>
                                    <div class="layui-col-md11">
                                        <input type="text" id="userId" name="userId" required lay-verify="userId" placeholder="请输入手机号"  class="layui-input t_input">
                                    </div>
                                </div>
                            </div>
                        <div class="layui-form-item">
                            <div class="layui-row txt_input"  >
                                <div class="layui-col-md1 icon" > <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label></div>
                                <div class="layui-col-md11">
                                        <input type="password" autocomplete="off" id="password" name="password" required lay-verify="password" placeholder="请输入密码" class="layui-input t_input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-row txt_input"  >
                                <div class="layui-col-md1 icon" > <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="nickname"></label></div>
                                <div class="layui-col-md11">
                                    <input type="text" id="nickname" name="nickname" required lay-verify="nickname" placeholder="请输入昵称" class="layui-input t_input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-row"  >
                                <div class="layui-col-md11">
                                    <div class="wrap">
                                        <div class="wrap-container">
                                            <div class="bg" ></div>
                                            <div class="box red"></div>
                                            <div class="box green"></div>
                                        </div>
                                        <div class="wrap-side">
                                            <p>向右滑动</p>
                                            <!-- 滑动条 -->
                                            <ul>
                                                <li></li>
                                            </ul>
                                            <!-- 滑动经过的地方设置背景 -->
                                            <div></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="layui-form-item" align="center">
                            <div class="layui-form-block">
                                <button type="button" id="registerBtn" lay-submit  class="layui-btn btn_login">注册</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
    <script>

        // 1. 获取页面相关的元素
        var wrap = document.querySelector(".wrap");
        var wrapContainer = document.querySelector(".wrap-container");
        var bg = document.querySelector(".wrap-container .bg");
        var red = document.querySelector(".wrap-container .red");
        var green = document.querySelector(".wrap-container .green");
        var liElement = document.querySelector(".wrap-side ul li");
        var divElement = document.querySelector(".wrap-side div");

        //定义验证是否成功的标识
        var isValidate = false;
        // 采用数组记录图片路径
        var arr = [
            '.\/static\/images\/1.jpg',
            '.\/static\/images\/2.jpg',
            '.\/static\/images\/3.jpg',
            '.\/static\/images\/4.jpg',
            '.\/static\/images\/5.jpg',
            '.\/static\/images\/6.jpg',
        ]

        // 2. 封装函数 生成随机数
        var getRdNum = function (min, max) {
            // 获取指定范围的随机数
            return Math.floor(Math.random() * (max - min) + min);
        }

        // 3. 记录滑动所需的数据
        // 记录.wrap标签的在页面的位置
        var oLeft = wrap.offsetLeft;
        var oTop = wrap.offsetTop;

        // 记录.wrap-container标签的尺寸
        var containerWidth = wrapContainer.offsetWidth;
        var containerHeight = wrapContainer.offsetHeight;

        // 记录绿色标签和红色标签的位置范围
        // var min_slide_X = 0;
        var min_slide_X = containerWidth / 2;
        var max_silde_X = containerWidth - green.offsetWidth;
        var min_slide_Y = 0;
        var max_silde_Y = containerHeight - green.offsetHeight;

        // 记录红色标签可滑动的范围
        var red_slide_X = containerWidth - red.offsetWidth;

        // 封装函数 获取绿色标签的随机的位置
        var getPos = function () {
            // 返回坐标
            return {
                x: getRdNum(min_slide_X, max_silde_X),
                y: getRdNum(min_slide_Y, max_silde_Y),
                x0: getRdNum(0, min_slide_X - red.offsetWidth)// 红色标签的水平位置
            }
        }
        // 封装函数 设置绿色/红色盒子的位置
        var setPos = function () {
            var point = getPos();
            green.style['left'] = point.x + "px";
            green.style['top'] = point.y + "px";
            red.style['left'] = point.x0 + "px";
            red.style['top'] = point.y + "px";

            // 选择.green标签区域对应的图片
            // 随机的索引值
            var index = Math.floor(Math.random() * arr.length);
            var path = `url(${arr[index]})`;
            // 设置背景图
            bg.style['backgroundImage'] = path;
            red.style['backgroundImage'] = path;
            // 计算出截取的部分图片
            var posX = point.x;
            var posY = point.y;
            // 设置.red标签的背景图位置
            red.style['backgroundPosition'] = `-${posX}px -${posY}px`;
        }
        setPos();

        // 记录红色标签当前的位置
        var red_cur_X = parseInt(getComputedStyle(red)['left']);

        // 设置滑动条
        // 记录滑块的位置
        var x = 0;

        // 记录鼠标在滑块中的位置
        var rx = 0;

        // 记录滑块当前位置
        // var cx = 0;

        // 记录红色盒子的位置(和绿色盒子的位置进行判断)
        var red_x = 0;
        // 记录绿色盒子的位置(获取初始值即可)
        var green_x = parseInt(getComputedStyle(green)['left']);

        // 定义布尔值 判断鼠标是否按下
        var isDown = false;

        // 鼠标按下滑块
        liElement.onmousedown = function (e) {
            rx = e.pageX - wrap.offsetLeft;
            var mx = containerWidth - liElement.offsetWidth;
            isDown = true;//鼠标按下
            // 鼠标在页面移动
            document.onmousemove = function (event) {
                // 计算出滑块的位置(鼠标在页面的坐标 减去  鼠标在滑块的坐标)
                // x = event.pageX - rx - liElement.offsetWidth  + cx;
                x = event.pageX - rx - liElement.offsetWidth;
                // 判断是否超出滑动范围
                if (x <= 0) x = 0;
                if (x >= mx) x = mx;
                // 设置滑块的位置
                liElement.style["left"] = x + "px";
                divElement.style["width"] = x + "px";

                // 设置红色标签的位置
                red_x = red_cur_X + x;
                console.log("red_x:", red_x);
                if (red_x >= (containerWidth - red.offsetWidth)) red_x = containerWidth - red.offsetWidth
                red.style["left"] = red_x + "px";


            }
        }
        // 鼠标在页面松开
        document.onmouseup = function () {
            // 解绑鼠标移动事件
            document.onmousemove = null;
            // cx = x;

            //判断鼠标是否按下滑块
            if (isDown) {
                // 检查红色和绿色标签的位置
                // console.log("红色盒子的X位置:",red_x);
                // console.log("绿色盒子的X位置:",green_x);

                // 判断是否验证通过
                if (red_x <= (green_x + 5) && red_x >= (green_x - 5)) {
                    alert("验证成功！");
                    isValidate = true;
                    console.log("验证通过！");
                }
                else {
                    console.log("验证失败~~");
                    alert("验证失败");
                    // 刷新页面
                    window.location.reload();
                }
            }

            // 重置布尔值
            isDown = false;
        }

        layui.use(['form', 'jquery'],function (){
            var form = layui.form;
            var $ = layui.jquery;
            var validateUid =false;
            var validatePwd =false;
            var validateNik =false;
            form.verify({
                userId: function (value){
                    if(value == "") return "手机号不能为空";
                    else if(!/^1[3-9]\d{9}$/.test(value)) return "手机号格式不正确";
                    else validateUid = true;
                },
                password: function (value){
                    if(value == "") return "密码不能为空";
                    else if(!/^[\S]{6,12}$/.test(value)) return "密码必须6-12位之间,且不能有空格";
                    else validatePwd = true;
                },
                nickname : function (value){
                    if(value == "") return "昵称不能为空";
                    else if(!/^[\d\w\u4e00-\u9fa5]{2,15}$/.test(value)) return "昵称必须在2-15位之间";
                    else validateNik = true;
                }
            })
            form.on("submit",function (){
                if(validateUid && validatePwd && validateNik && isValidate){
                    var userId = $("#userId").val();
                    var nickname = $("#nickname").val();
                    var password = $("#password").val();
                    $.ajax({
                        "url":"/register.html",
                        "data":{userId: userId, nickname: nickname, password: password},
                        "dataType":"json",
                        "method":"post",
                        success:function (data) {
                            if (data.infos == "success") {
                                alert("注册成功!")
                                location.href = "/login.html";
                                return;
                            } else {
                                alert("注册失败!")
                                location.href = "/register.html";
                                return;
                            }
                        }
                    });
                }else{
                    alert("验证未通过,请通过后注册")
                }
            })
        })


    </script>
</body>
</html>
